<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;background: green;}
        .cont{border:solid 10px black;}
        #box{background: red;}
    </style>
</head>
<body>
    <div class="box" abc="这是html的abc" title="这是html的title">这是一个div</div>
</body>
<script>
    var oBox = document.querySelector(".box");

    console.log(oBox);

    // html内置：class，title
    // 对象的操作语法
    // 查
    console.log( oBox.title );
    // 改
    oBox.title = "hello-title";
    // 查
    console.log( oBox.className );
    // 改
    oBox.className = "cont";
    // 增
    oBox.id = "box";
    // delete关键字无法删除

    // html自定义：abc

    // 自定义属性无法直接使用对象的语法操作
    // console.log( oBox.abc );
    // oBox.qwe = "hello qwe";

    // 专属方法
    // 查
    console.log( oBox.getAttribute("abc") );

    // 改
    oBox.setAttribute("abc", "hello abc");
    // 增
    oBox.setAttribute("qwe", "hello qwe");
    // 删
    oBox.removeAttribute("qwe");
    oBox.removeAttribute("abc");
    
    // 自定义的操作方式，可以操作html内置属性
    console.log( oBox.getAttribute("id") );
    oBox.setAttribute("title", "hello world title");
    oBox.removeAttribute("id");
    
    console.log( oBox.getAttribute("class") );
    oBox.setAttribute("class", "aaaaa");
    oBox.removeAttribute("class");


    
</script>
</html>